<template>
  <div class="page">
    <a href="#" v-show="curpage > 1" class="prev" @click="prevPage">上一页</a>
    <a
      href="#"
      v-for="(item, ind) in showPage"
      :key="ind"
      @click="tempPageChange(item)"
      :class="item == curpage ? 'active' : null"
      >{{ item }}</a
    >
    <a
      href="#"
      class="next"
      @click="nextPage"
      v-show="Math.ceil(allcount / tempPageSize) > curpage"
      >下一页</a
    >
  </div>
</template>
<script>
export default {
  name: "MyPage",
  //每页大小、总数
  props: ["pageSize", "total"],
  data() {
    return {
      // 每页的大小
      tempPageSize: this.pageSize,
      // 页码数
      showPage: [],
      // 当前页码
      curpage: 1,
      // 总数
      allcount: this.total,
    };
  },
  watch: {
    //监听总数的变化
    allcount(newVal) {
      console.log("allcount", newVal);
      this.showPage = [];
      if (Math.ceil(newVal / this.tempPageSize) < 10) {
        // Math.ceil小数部分舍去，向上取整
        for (let i = 0; i < Math.ceil(newVal / this.tempPageSize); i++) {
          this.showPage.push(i + 1);
        }
      } else {
        this.showPage = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      }
    },
  },
  created() {
    this.showPage = [];
    if (Math.ceil(this.allcount / this.tempPageSize) < 10) {
      for (let i = 0; i < Math.ceil(this.allcount / this.tempPageSize); i++) {
        this.showPage.push(i + 1);
      }
    } else {
      this.showPage = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }
  },
  methods: {
    //上一页
    prevPage() {
      if (this.curpage > 1) {
        this.curpage = this.curpage - 1;
        if (this.curpage < this.showPage[0]) {
          this.showPage = this.showPage.slice(0, -1); //删除数组最后一个元素
          this.showPage.unshift(this.curpage); //在数组最前面插入当前页
        }
      } else {
        this.$Message.error({ content: "已经是第一页了！" });
      }
    },
    //下一页
    nextPage() {
      if (this.curpage + 1 > this.showPage[this.showPage.length - 1]) {
        if (Math.ceil(this.allcount / this.tempPageSize) >= this.curpage + 1) {
          this.curpage += 1;
          this.$emit("pageChange", this.curpage);
          this.showPage = this.showPage.slice(1); //删除数组第一个元素
          this.showPage.push(this.curpage); //在数组末尾插入当前页
        } else {
          this.$Message.error({ content: "已经是最后一页了！" });
        }
      } else {
        this.curpage += 1;
        this.$emit("pageChange", this.curpage);
      }
    },
    //切换页码
    tempPageChange(value) {
      this.curpage = value;
      this.$emit("pageChange", value);
    },
  },
};
</script>
<style scoped>
.page {
  width: 635px;
  height: 36px;
  font-size: 0;
}

.page > a {
  display: inline-block;
  font: 12px/34px "Microsoft YaHei UI";
  width: 34px;
  height: 34px;
  border: 1px solid #e1e2e3;
  color: #000;
  text-align: center;
  text-decoration: none;
}

.page > .prev,
.page > .next {
  width: 86px;
}

.page > a:not(:first-child) {
  margin-left: 9px;
}

.page > a:hover,
.page > a.active {
  border-color: #3388ff;
  /* border-color: #000; */
  color: #3388ff;
  background-color: #f2f8ff;
}
</style>